<!--视频监控-->
<template>
  <view class="home flex column">
    <view ref="videoCard" class="video-card u-flex u-row-center u-col-center">
    </view>

    <!-- 列表 -->
    <scroll-view :scroll-y="true" class="container item one">
      <view class="container-body">
        <template v-if="list && list.length">
          <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :show-head="false" :show-footer="false"
            :body-style="{ padding: '30rpx 20rpx' }" v-for="(item, index) in list" :key="index" :class="getClass(item)"
            @click="item.onlineStatus === '1' ? playVideo(item) : ''">
            <view slot="body">
              <view class="card-row u-flex u-row-between">
                <view class="card-row-title t-title">{{ item.cameraName }}</view>
                <view class="t-green" @click.stop="goRecordVideo(item)">查看录像</view>
              </view>
            </view>
          </u-card>
        </template>
        <template v-if="showEmpty">
          <view class="c-empty p-absolute-center">
            <u-empty text="暂无数据"></u-empty>
          </view>
        </template>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import axios from 'axios'
// #ifdef H5
import Jessibuca from '@/static/jessibuca/jessibuca.js'
// #endif
export default {
  name: "index",
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data () {
    return {
      searchData: {
        customerNo: "",
        stream: "sub",
      },
      list: [],
      cameraUuid: "",
      src: "",
      showEmpty: false,
      wb: null,
      player: null,
    };
  },
  destroyed () {
    // #ifdef APP-PLUS
    this.wb.close();
    // #endif
  },
  async mounted () {
    var pages = getCurrentPages();

    var page = pages[pages.length - 1];

    // #ifdef APP-PLUS
    var currentWebview = page.$getAppWebview();
    this.wb = plus.webview.create("/hybrid/html/index.html", "", {
      width: "94%",
      left: "3%",
      height: "200px",
      top: "120px",
    });
    currentWebview.append(this.wb);
    // #endif

    // #ifdef H5
    this.initplayer()
    // #endif
    this.searchData.customerNo = this.data.enCode;
    this.getData();

  },
  methods: {
    initplayer () {
      // #ifdef H5
      const dom = this.$refs.videoCard
      this.player = new Jessibuca({
        decoder: '/static/jessibuca/decoder.js',
        container: dom.$el,
        isFlv: true,
        isResize: false,
        text: '',
        loadingText: '加载中',
        hasAudio: false,
        debug: false,
        timeout: 120,
        showBandwidth: true, // 显示网速
        vod: false,
        forceNoOffscreen: true,
        isNotMute: false,
        operateBtns: {
          fullscreen: true
        }
      });
      // #endif

      // #ifdef APP-PLUS
      this.player.on("fullscreen", function (flag) {
        if (flag === true) {
          // 横屏
          plus.screen.lockOrientation("landscape-primary")
        } else {
          // 竖屏
          plus.screen.lockOrientation("portrait-primary")
        }
      })
      // #endif

    },
    getClass (data) {
      let className = "";
      if (data.onlineStatus === "0") {
        className = "disable-bg";
      } else {
        if (data.cameraUuid === this.cameraUuid) {
          className = "select-active";
        }
      }
      return className;
    },
    /**
     * 请求数据
     */
    async getData () {
      const data = {
        ...this.searchData,
      };
      const res = await this.getCameraList(`/monitor/camera/pull/getCameraList?customerNo=${data.customerNo}&type=0`);
      if (Array.isArray(res)) {
        this.list = res;
        // 数据空
        if (this.list && this.list.length === 0) {
          this.showEmpty = true;
          uni.showToast({
            title: "暂无视频",
            icon: "none",
          });
        } else {
          this.showEmpty = false;
        }
        // #ifdef H5
        if (this.list.length > 0) {
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].onlineStatus === "1") {
              this.playVideo(this.list[i]);
              this.cameraUuid = this.list[i].cameraUuid;
              return;
            }
          }
        }
        // #endif
      }
    },
    async getCameraList (url) {
      const { body } = await this.$get(url)
      if (body && body.length) {
        return body
      }
      return []
    },
    /**
     * 切换视频
     */
    async playVideo (item) {
      const url = await this.getFlvUrl(item)
      // #ifdef APP-PLUS
      this.cameraUuid = item.cameraUuid
      this.wb.evalJS(`getUrlAndPlay('${url}')`);
      // #endif
      // #ifdef H5
      this.player.play(url)
      // #endif
    },
    async getFlvUrl (camera) {
      if (camera && (camera.cameraUuid || camera.deviceNo)) {
        const { body } = await this.$get('/monitor/camera/pull/getHttpFlvUrl', camera)
        if (body) {
          return body.wsUrl
        }
        return ''
      }
    },
    goRecordVideo (item) {
      uni.navigateTo({
        url: `./recordDetail?item=${JSON.stringify(item)}`,
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;

  .container {
    padding-bottom: 30rpx;
  }

  .video-card {
    height: 400rpx;
    background-color: #000;
  }

  .disable-bg {
    background-color: #eee;
  }

  .select-active {
    background: rgba(#cad1e5, 0.5);
  }
}
</style>
